<template>
  <div class="flex-column">
<!--    学习成就-->
    <div class="bg-color-white  tw-h-248" style="border-radius: 6px">
      <div class="tw-p-30">
        <h5 class="study-title">学习成就</h5>
        <div class="flex-between-center tw-h-145 tw-px-19 tw-py-32 tw-mt-17" style="background: linear-gradient( 90deg, #F2F6FF 0%, #E5F3FF 100%);border-radius: 6px">
          <div class="flex-column">
            <div class="font-normal tw-font-normal tw-text-[#010b16]">世界不辜负 每一份坚持</div>
            <div class="flex-around-center tw-mt-16 tw-w-682">
              <div class="flex-column">
                <span class="study-label">听课时长</span>
                <span v-if="data.listenDuration > 3600" class="study-value">
                  <span class="study-value-unit">{{formatTime(data.listenDuration,'minute').slice(0,-7)}}</span>
                  <span>小时</span>
                  <span class="study-value-unit">{{formatTime(data.listenDuration, 'minute').slice(-4,-2)}}</span>
                  <span>分钟</span>
                </span>
                <span v-else class="study-value">
                  <span class="study-value-unit">{{data.listenDuration == 0? '0' : formatTime(data.listenDuration, 'minute').slice(-4,-2)}}</span>
                  <span>分钟</span>
                </span>
              </div>
              <div class="flex-column">
                <span class="study-label">做题数量</span>
                <span class="study-value">
                <span class="study-value-unit">{{ data.totalExerciseCount || 0 }}</span>
                <span>道</span>
              </span>
              </div>
              <div class="flex-column">
                <span class="study-label">学习天数</span>
                <span class="study-value">
                <span class="study-value-unit">{{data.studyDay || 0}}</span>
                <span>天</span>
              </span>
              </div>
            </div>
          </div>
          <div class="tw-w-120 tw-h-120">
            <img class="width100 height100" src="@/assets/images/study/point-icon.png" alt="">
          </div>
        </div>
      </div>
    </div>
<!--    学习进度-->
    <div class="flex-between-center tw-mt-30">
      <div class="bg-color-white tw-w-453 tw-h-157 tw-rounded-md tw-px-30 tw-py-24">
        <h5 class="study-title">学习进度</h5>
        <div class="flex-between-center tw-mt-24">
          <div class="flex-column flex-all-center study-item">
            <span>{{JSON.stringify(data.listenedCount || 0) + '/' + JSON.stringify(data.totalLessonVideoCount || 0)}}</span>
            <span class="text-content">录播</span>
          </div>
          <div class="flex-column flex-all-center study-item">
            <span>{{JSON.stringify(data.exerciseCount || 0) + '/' + JSON.stringify(data.totalQuestionCount || 0)}}</span>
            <span class="text-content">随堂练习</span>
          </div>
        </div>
      </div>
      <div class="bg-color-white tw-w-453 tw-h-157 tw-rounded-md tw-px-30 tw-py-24">
        <h5 class="study-title">主干课进度</h5>
        <div class="tw-mt-24">
          <div class="width100">
            <el-progress :text-inside="true" :stroke-width="18" :percentage="getCoursePercentage()" :color="'#04addb'" />
          </div>
          <div class="width100 flex-end text-content tw-mt-10">
            <span>
              <span class="tw-text-[#04ADDB]">{{JSON.stringify(data.listenedCount|| 0)}}</span>
              <span>{{'/' + JSON.stringify(data.totalLessonVideoCount || 0)}}</span>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {defineProps, getCurrentInstance, reactive, watch} from 'vue';
import {useRoute, useRouter} from 'vue-router';
import {getStudyReport} from '../../../api/study.js'
import {formatNumber, formatTime} from '@/utils/common.js'

const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();
const props = defineProps({
  courseId: {
    type: Number,
    default: ''
  },
  orderItemId: {
    type: Number,
    default: ''
  }
});
const data = reactive({
  "listenDuration": 0, //听课时长ms
  "listenedCount": 0, //已听视频数
  "totalLessonVideoCount": 0, //总课程视频数
  "studyDay": 0, //学习天数
  "totalExerciseCount": 0, //总做题数
  "exerciseCount": 0, //练习的题目数,课程中视频/直播课等关联的题库所做的题目
  "totalQuestionCount": 0 //课程中视频/直播课等关联的题库总题目数
})
const getCoursePercentage = () => {
  return formatNumber( (data.listenedCount / data.totalLessonVideoCount)*100)
}
const getReport = () => {
  let requestData = {
    courseId: props.courseId,
    orderItemId: props.orderItemId
  }
  getStudyReport(requestData, (res)=> {
    Object.keys(data).forEach((key) => { data[`${key}`] = res.data[`${key}`] })
  })
}
const initData = () => {
  getReport()
}
watch(()=>props.courseId,()=>{
  initData()
})

</script>
<style scoped>
.study-title {
  font-size: 18px;
  color: #171921;
  font-weight: 600;
  margin-bottom: 4px
}
.study-label {
  font-size: 12px;
  font-weight: 400;
  color: #171921;
}
.study-value {
  font-size: 14px;
  font-weight: 400;
  color: #aeaeae;
}
.study-value-unit {
  font-size: 24px;
  margin-right: 2px;
  color: #04ADDB
}
.study-item {
  width: 180px;
  height: 58px;
  background: #F7FBFE;
  font-size: 15px;
  color: #010b16;
  font-weight: 600;
}
.text-content {
  font-size: 13px;
  font-weight: 400;
  color: #9a9a9a
}

</style>
